<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1 v-for="item in money" :key="item.name">
      <!-- 过滤器的调用式管道写法 -->
      {{item.name}}----{{item.price | two}}
    </h1>
    <h1 v-for="item in list" :key="item">{{item | jc5}}</h1>
    <div :id="myid | cid">属性过滤</div>
  </div>
    <script src="./vue.js"></script>
    <script>
      // 全局过滤器  用来处理 数据渲染的 
      // 可以过滤渲染的数据 和渲染的属性
      Vue.filter('two',(val)=>{
          // val----要过滤处理的数据
          return Number(val).toFixed(2)
      })
       Vue.filter('cid',(val)=>{
          // val----要过滤处理的数据
          return val+"jsxy"
      })
      //  Vue.filter('sort',(val)=>{
      //     // val----要过滤处理的数据
      //     return [...val[1],...val[2],...val[0]]
      // })
      // VUE全局挂载插件
      // Vue.use() 
      // Vue.prototype.$method = 插件名
      
      new Vue({
        el:"#app",
        components:{},
        data(){
          return {
            myid:"box",
            money:[{name:"香蕉",price:"3.5045"},
              {
                name:"苹果",price:"5.5656"
              },
              {
                name:"橘子",price:"2.5656"
              }
            ],
            list:[34,3,56,76]
          }
        },
        computed:{
          newMoney(){
                let arr=this.money.map(item=>{
                  item.price=Number(item.price).toFixed(2)
                  return item
                })
            return arr
          }
        },
        // 局部过滤器
        filters:{
          jc5(val){
            return val*5
          }
        }
      })
    </script>
</body>
</html>